<template>
	<view class="goods_details">
		<swiper indicator-dots>
			<swiper-item v-for="(item,index) in thuList" :key="item.id">
				<image :src="item.thumimg"></image>
			</swiper-item>	
		</swiper>
		<view class="box1">
			<view class="price">
				<text>${{infoObj.sellPrice}}</text>
				<text>${{infoObj.marketPrice}}</text>
			</view>
			<view class="name">
				{{infoObj.title}}
			</view>
		</view>
		<view class="line"></view>
		<view class="box2">
			<view>货号:{{infoObj.id}}</view>
			<view>库存:{{infoObj.stockQuantity}}</view>
			<view>上市时间:{{infoObj.gmtCreate}}</view>
		</view>
		<view class="line"></view>
		<view class="box3">
			<view class="tit">详情介绍</view>
			<view class="context">内容:{{infoObj.info}}</view>
		</view>
		
		<view class="goods-cart">
			<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	//mapState，mapGetters 写在computed中
	//mapMutations写在methods
	//使用扩展运算符 ...[]
	export default{
		data(){
			return{
				id:-1,
				thuList:[],
				infoObj:'',
				options: [
					{icon: 'chat',text: '客服'}, 
					{icon: 'shop',text: '店铺',info: 0,infoBackgroundColor: '#007aff',infoColor: "#f5f5f5"},
					{icon: 'cart',text: '购物车',info: 0}
				],
				buttonGroup: [
					{text: '加入购物车',backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',color: '#fff'},
					{text: '立即购买',backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',color: '#fff'}
				]
			}
		},
		watch:{
			//购物车角标第一次加载页面不显示 watch监听的值不发生不变化不会触发
			//解决方案  total函数改变为对象形式    immediate:true
			//handler用来定义 function的处理函数
			total:{
				handler(newVal){
					this.options[2].info = newVal
				},
				immediate:true
			}	
		},
		computed:{
			...mapState('m_cart',['cart']),
			...mapGetters('m_cart',['total'])
		},
		onLoad(options){
			this.id = options.id
			this.getthuList()
			this.getInfo()
		},
		methods:{
			...mapMutations('m_cart',['addToCart']),
			async getthuList(){
				const res = await this.$myRequest({
					url:"/getThumimages",
					data:{goodsId:this.id}
				})
				this.thuList = res.data
			},
			async getInfo(){
				const res = await this.$myRequest({
					url:"/selectGoodsInfoById",
					data:{goodsId:this.id}
				})
				console.log(res.data)
				this.infoObj = res.data
			},
			onClick(e) {
				// uni.showToast({
				// 	title: `点击${e.content.text}`,
				// 	icon: 'none'
				// })
				uni.switchTab({
					url:"/pages/cart/cart"
				})
			},
			buttonClick(e){
				console.log(e)
				if(e.index === 0){
					//加入购物车
					this.options[2].info++
					const goods = {
						goodsId:this.infoObj.id,//主键id
						goodsName:this.infoObj.title,
						goodsPrice:this.infoObj.sellPrice,
						goodsCount:1,
						goodsImg:this.infoObj.imgUrl,
						goodsStates:true
					}
					//调用vuex中的add方法
					this.addToCart(goods)
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.goods_details{
		swiper{
			height: 700rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.box1{
			padding:10px;
			.price{
				font-size: 35rpx;
				color:$shop-color;
				line-height: 80rpx;
				text:nth-child(2){
					color:#ccc;
					font-size: 30rpx;
					text-decoration: line-through;
					margin-left: 40rpx;
				}
			}
			.name{
				font-size: 35rpx;
				line-height: 35px;
			}
		}
		.line{
			background-color: red;
			width: 100%;
			height: 2px;
		}
		.box2{
			padding:0 10px;
			font-size: 32rpx;
			line-height: 50rpx;
			margin-bottom: 10px;
		}
		.box3{
			.tit{
				font-size:35rpx;
				padding-left: 10px;
				border-bottom: 2px solid #eee6e2;
				line-height: 70rpx;
			}
			.context{
				padding:10px;
				font-size: 28rpx;
				color: black;
				padding-bottom: 400rpx;
			}
		}
		.goods-cart {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			
		}
	}
	
</style>